<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form :form="form" slot="detail">
        <a-row>
          <a-col :span="8" >
            <a-form-item label="房源号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['houseCode', validatorRules.houseCode]" placeholder="请输入房源号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="所属楼宇编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-popup
                v-decorator="['building', validatorRules.building]"
                :trigger-change="true"
                org-fields="building_code,building_name,building_project,project_name"
                dest-fields="building,buildingName,project,projectName"
                code="v_xy_park_buildingproject"
                @callback="popupCallback"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="所属楼宇名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input disabled v-decorator="['buildingName']" placeholder="请输入所属楼宇名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="所属项目编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input disabled v-decorator="['project', validatorRules.project]" placeholder="请输入所属项目编码"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="所属项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input disabled v-decorator="['projectName']" placeholder="请输入所属项目名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="楼层" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['floor', validatorRules.floor]" placeholder="请输入楼层"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="建筑面积（㎡）" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['buildingArea', validatorRules.buildingArea]" placeholder="请输入建筑面积（㎡）" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="产权面积（㎡）" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-decorator="['propertyArea', validatorRules.propertyArea]" placeholder="请输入产权面积（㎡）" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="装修情况" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['decoration', validatorRules.decoration]" :trigger-change="true" dictCode="park_decoration" placeholder="请选择装修情况"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="房源类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag type="list" v-decorator="['houseType', validatorRules.houseType]" :trigger-change="true" dictCode="park_housing_types" placeholder="请选择房源类型"/>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="房源备案号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['housingRegistration']" placeholder="请输入房源备案号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="房源状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                v-decorator="['houseStatus', validatorRules.houseStatus]"
                :trigger-change="true"
                placeholder="请选择房源状态"
                dict-code="park_housing_condition"
              >
              </j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['remarks']" placeholder="请输入备注"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
      <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="房源配属资产" :key="refKeys[0]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="xyParkHousecapitalTable.loading"
          :columns="xyParkHousecapitalTable.columns"
          :dataSource="xyParkHousecapitalTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
      <a-tab-pane tab="房源住宿信息" :key="refKeys[1]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[1]"
          :loading="xyParkHousestayTable.loading"
          :columns="xyParkHousestayTable.columns"
          :dataSource="xyParkHousestayTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import JDictSelectTag from '@/components/dict/JDictSelectTag'

export default {
  name: 'XyParkHouseForm',
  mixins: [JEditableTableMixin],
  components: {
    JFormContainer,
    JDictSelectTag
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        houseCode: {
          rules: [
            { required: true, message: '请输入房源号!' },
            { validator: (rule, value, callback) => validateDuplicateValue('xy_park_house', 'house_code', value, this.model.id, callback) }
          ]
        },
        building: {
          rules: [
            { required: true, message: '请输入所属楼宇编码!' }
          ]
        },
        project: {
          rules: [
            { required: true, message: '请输入所属项目编码!' }
          ]
        },
        floor: {
          rules: [
            { required: true, message: '请输入楼层!' }
          ]
        },
        buildingArea: {
          rules: [
            { required: true, message: '请输入建筑面积（㎡）!' },
            { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }
          ]
        },
        propertyArea: {
          rules: [
            { required: true, message: '请输入产权面积（㎡）!' },
            { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }
          ]
        },
        decoration: {
          rules: [
            { required: true, message: '请输入装修情况!' }
          ]
        },
        houseType: {
          rules: [
            { required: true, message: '请输入房源类型!' }
          ]
        },
        houseStatus: {
          rules: [
            { required: true, message: '请选择房源状态!' }
          ]
        }
      },
      refKeys: ['xyParkHousecapital', 'xyParkHousestay'],
      tableKeys: ['xyParkHousecapital', 'xyParkHousestay'],
      activeKey: 'xyParkHousecapital',
      // 房源配属资产
      xyParkHousecapitalTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '资产名称',
            key: 'capitalName',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '资产厂家',
            key: 'capitalSupply',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '资产型号',
            key: 'capitalModel',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '数量',
            key: 'capitalQty',
            type: FormTypes.inputNumber,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '单位',
            key: 'unit',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '单价',
            key: 'capitalPrice',
            type: FormTypes.inputNumber,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          }
        ]
      },
      // 房源住宿信息
      xyParkHousestayTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '姓名',
            key: 'stayName',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '性别',
            key: 'sexy',
            type: FormTypes.select,
            dictCode: 'sex',
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '入住时间',
            key: 'stayTime',
            type: FormTypes.date,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '身份证',
            key: 'stayId',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          }
        ]
      },
      url: {
        add: '/community/xyParkHouse/add',
        edit: '/community/xyParkHouse/edit',
        queryById: '/community/xyParkHouse/queryById',
        xyParkHousecapital: {
          list: '/community/xyParkHouse/queryXyParkHousecapitalByMainId'
        },
        xyParkHousestay: {
          list: '/community/xyParkHouse/queryXyParkHousestayByMainId'
        }
      }
    }
  },
  props: {
    // 流程表单data
    formData: {
      type: Object,
      default: () => {},
      required: false
    },
    // 表单模式：false流程表单 true普通表单
    formBpm: {
      type: Boolean,
      default: false,
      required: false
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return false
        }
        return true
      }
      return this.disabled
    },
    showFlowSubmitButton() {
      if (this.formBpm === true) {
        if (this.formData.disabled === false) {
          return true
        }
      }
      return false
    }
  },
  created() {
    // 如果是流程中表单，则需要加载流程表单data
    this.showFlowData()
  },
  methods: {
    addBefore() {
      this.form.resetFields()
      this.xyParkHousecapitalTable.dataSource = []
      this.xyParkHousestayTable.dataSource = []
    },
    getAllTable() {
      const values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      const fieldval = pick(this.model, 'houseCode', 'building', 'buildingName', 'project', 'projectName', 'floor', 'buildingArea', 'propertyArea', 'decoration', 'houseType', 'housingRegistration', 'houseStatus', 'remarks')
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldval)
      })
      // 加载子表数据
      if (this.model.houseCode) {
        const params = { id: this.model.houseCode }
        this.requestSubTableData(this.url.xyParkHousecapital.list, params, this.xyParkHousecapitalTable)
        this.requestSubTableData(this.url.xyParkHousestay.list, params, this.xyParkHousestayTable)
      }
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      const main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        xyParkHousecapitalList: allValues.tablesValue[0].values,
        xyParkHousestayList: allValues.tablesValue[1].values
      }
    },
    // 渲染流程表单数据
    showFlowData() {
      if (this.formBpm === true) {
        const params = { id: this.formData.dataId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.edit(res.result)
          }
        })
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'houseCode', 'building', 'buildingName', 'project', 'projectName', 'floor', 'buildingArea', 'propertyArea', 'decoration', 'houseType', 'housingRegistration', 'houseStatus', 'remarks'))
    }

  }
}
</script>

<style scoped>
</style>
